<template>
  <div>
    <table class="table table-striped table-bordered">
  <thead>
    <tr>
     <!-- 预留插槽 -->
     <slot name="header"></slot>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item,index) in data" :key="item.id" >
     <!-- 提高组件的复用性，将列表的显示区域也使用插槽 -->
     <slot name="body" :row="item" :index="index"></slot>
    </tr>
  </tbody>
</table>

  </div>
</template>

<script>
export default {
    name:'MyTable',
    data(){
        return{
                         
        }
    },
    props:{
        // 表单数据源
        data:{
            type:Array,
            required:true,
            default:[]
        }
    }
}
</script>

<style lang="less" scoped>
 table{
    border: 1px solid #efefef;
    width: 800px;
   
 }
  
</style>